<template>
            <van-nav-bar title="VR" left-text="返回" left-arrow @click-left="onClickLeft" :fixed="true" />
    <div  ref="container">
    </div>
</template>

<script setup lang='ts'>
//@ts-ignore
import * as THREE from 'three';
import { onMounted, ref } from 'vue';
//@ts-ignore
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import router from '@/router';
const container = ref();
//创建渲染器
const Renderer = new THREE.WebGLRenderer();
Renderer.setSize(window.innerWidth, window.innerHeight);

/* Renderer.setClearColor(0x000000,1.0); */

//创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.z = 2
//创建场景
const scene = new THREE.Scene();
//创建球体
const sphere = new THREE.SphereGeometry(1, 32, 32);
//创建纹理
let texture = new THREE.TextureLoader().load('/R-C.jfif')
let boxMaterial = new THREE.MeshBasicMaterial({ map: texture })
//创建网格
const cube = new THREE.Mesh(sphere, boxMaterial);
//cube.material.wireframe = true;
cube.geometry.scale(1, 1, -1)
scene.add(cube)
const orbit = new OrbitControls(camera, Renderer.domElement)

const render = () => {
    Renderer.render(scene, camera);
    orbit.update()
    requestAnimationFrame(render)
}
onMounted(() => {
    container.value.appendChild(Renderer.domElement);
    render();

})
const onClickLeft = () => {
    router.back()
}
</script>

<style lang='less' scoped>
</style>
